<template>
	<uni-popup ref="popup" type="center" border-radius="10px">
		<view class="modal">
			<text class="title">{{ title }}</text>
			<view class="content">
				<text class="txt">{{ content }}</text>
			</view>
			<view class="btns">
				<button size="default" v-if="showCancel" class="btnDefault" hover-class="btnHover"
					@click="modalCancel">{{cancelText}}</button>
				<button size="default" v-if="showConfirm" class="btnDefault btnPrimary" hover-class="btnHover"
					@click="modalConfirm">{{confirmText}}</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		name: "zkModal",
		data() {
			return {
				title: '',
				content: '',
				showCancel: true,
				showConfirm: true,
				confirmText: '确定',
				cancelText: '取消',
				resolve: null,
				reject: null,
			};
		},
		computed: {},
		methods: {
			show(options) {
				this.title = options.title || "温馨提示";
				this.content = options.content || "";
				this.showConfirm = options.showConfirm == undefined ? true : options.showConfirm;
				this.showCancel = options.showCancel == undefined ? true : options.showCancel;
				this.confirmText = options.confirmText || "确定";
				this.cancelText = options.cancelText || "取消";
				this.$refs.popup.open();
				return new Promise((resolve, reject) => {
					this.resolve = resolve;
					this.reject = reject;
				});
			},
			modalConfirm(e) {
				this.resolve(true);
				this.$refs.popup.close();
			},
			modalCancel(e) {
				this.resolve(false);
				this.$refs.popup.close();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.modal {
		width: 560rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		background: #fff;

		.title {
			width: 100%;
			height: 80rpx;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #191919;
			text-align: center;
		}

		.content {
			width: 100%;

			.txt {
				padding: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #7F7F7F;
				text-align: justify;
				line-height: 40rpx;
			}
		}

		.btns {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: center;
			margin-top: 40rpx;

			.btnDefault {
				background: #e9ecec;
				color: #7F7F7F;
				margin: 0 20rpx;
				font-size: 30rpx;
				flex: 1;
				height: 80rpx;
				box-shadow: none;
			}

			.btnPrimary {
				color: #fff;
				background: #1081ff;
			}
		}
	}
</style>